<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>MeteoCal Home</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            
        <!-- NORTHERN LAYOUT UNIT -->
        <p:layoutUnit position="north" size="60" >
            
            <!-- Search for a user -->
            <h:form>
            <div style="position:absolute;top:8px;left:35px;">   
            <h:panelGroup id="AutoAndWatermark">
            <p:autoComplete id="searchUserHome" value="#{SearchUserBean.selectedUser}"
                            completeMethod="#{SearchUserBean.completeUsers}"  
                            var="user" 
                            itemLabel="#{user.username}" itemValue="#{user}" 
                            converter="userConverter"
                            onchange="#{SearchUserBean.selectedUser};"
                            cache="true"                
                            size="50"
                            emptyMessage="No users to suggest.">     
                <p:ajax event="itemSelect" update=":userdlg" oncomplete="PF('srcUserDialog').show();"/>      
                <p:column style="height:20px;text-align:center;background-color: #f3f3e9;color:#000066;text-shadow: none">
                #{user.username} - #{user.email} 
                </p:column>
            </p:autoComplete>
            <p:watermark id="wm" for="searchUserHome" value="Search by username" />
            </h:panelGroup>
            </div>
            </h:form>
            
            <p:dialog id="userdlg" widgetVar="srcUserDialog" header="User details" resizable="false"  
                      showEffect="clip" hideEffect="clip" appendTo="@(body)" 
                      style="background-color:aliceblue;te" width="380" height="190" >
                <h:form>

                <h:panelGrid id="userDetails" columns="2">   
                    <h:outputLabel value="Username: &nbsp;&nbsp;" />
                    <h:outputText id="name" value="#{SearchUserBean.selectedUser.username}" />       
                        
                    <h:outputLabel value="Email: &nbsp;&nbsp;" />
                    <h:outputText id="email" value="#{SearchUserBean.selectedUser.email}" /> 
                    <br/>
                </h:panelGrid>
                <h:panelGrid id="fields" columns="2">
                <h:outputLabel value="#{SearchUserBean.selectedUser.username}'s calendar is private.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'private'}"
                               style="color:#000066" escape="true"/>
                <p:graphicImage value="/images/lock.png" style="width:35px;height:35px" 
                     rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'private'}"/>
                
                <h:outputLabel value="#{SearchUserBean.selectedUser.username}'s calendar is public.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"
                               style="color:#000066" escape="true"/>
                <p:graphicImage value="/images/unlock.png" style="width:23px;height:30px"
                     rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"/>               
                
                </h:panelGrid>
                
                    <p:button id="showCal" value="Show calendar" outcome="otherUserCalendar"
                           rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"
                           style="font-family:calibri;color:#000066;font-size:19px;width:170px;height:40px"/>
              
            </h:form>
            </p:dialog>
            
            <!-- Back home button -->
            <h:form>
                <p:button id="back" value="My calendar" icon="ui-icon-home" outcome="home"
                          style="font-family:calibri;color:#000066;font-size:19px;width:180px;height:35px;
                          position:absolute;top:8px;left:500px"/>
            </h:form>
            
            <!-- Notifications -->
            <h:form id="f">               
                <p:commandButton id="notif" value="Show notifications" icon="ui-icon-star" update="ds" oncomplete="PF('notifDialog').show();" 
                                 style="width:230px;height:35px;font-family:calibri;color:#000066;font-size:18px;position:absolute;top:8px;left:700px;"/>
                <h:outputText value="N notifications unread!" style="font-family:calibri;font-style:italic;color: #cc0000;font-size:15px; position:absolute;top:15px;left:940px"/>
                
                <p:dialog id="notifdlg" widgetVar="notifDialog" header="Notifications panel" resizable="false"  
                      showEffect="drop" hideEffect="clip" appendTo="@(body)" 
                      style="background-color:aliceblue;" width="550" height="380" >                   
                    <p:dataScroller id="ds" value="#{NotificationBean.getNotifications()}" var="notif" rows="5" scrollHeight="353" mode="inline">
                        <h:panelGrid columns="3" columnClasses="logo,detail" style="width:100%;border-style:solid;border-width:1px; border-bottom: thin" >
                                <p:outputPanel>                                   
                                    <div align="center">
                                        <p:spacer width="15" height="10"/>
                                        <p:graphicImage value="/images/#{notif.type}-icon.png" style="width:40px;height:40px;  "/>
                                    </div>
                                </p:outputPanel>
                                
                                <p:outputPanel>
                                    <h:panelGrid columns="1" cellpadding="1" style="text-indent:20px">
                                        <h:outputText value="Notification for the event:" style="color:#000066;font-size:14px;font-family:calibri;"/>
                                        <h:outputText value="#{notif.eventID.name}" style="color:#000066;font-size:18px;font-family:calibri;font-weight:bold;" />
                                        <h:outputText value="#{notif.getFormatDate()} at #{notif.getFormatHour()}" style="color:#000066;font-size:11px;font-family:calibri;"/>                        
                                    </h:panelGrid>                                    
                                </p:outputPanel>
                                
                                <p:outputPanel>                                   
                                    <p:commandButton value="Get details" process="@this" update=":f:notifDetail" oncomplete="PF('notifDetailDialog').show()"
                                                         style="width:150px;height:35px;color:#000066;font-size:17px;font-family:calibri;">
                                        <f:setPropertyActionListener value="#{notif}" target="#{NotificationBean.selectedNotification}"/>
                                       
                                    </p:commandButton> 
                                </p:outputPanel>                             
                            </h:panelGrid>
                                            
                        </p:dataScroller>
                    <p:dialog id="dialogNotif" widgetVar="notifDetailDialog" header="Notification details" resizable="false"
                                    style="background-color:aliceblue;" showEffect="drop" hideEffect="clip" appendTo="@(body)">
                                <p:outputPanel id="notifDetail" >
                                    <p:graphicImage value="/images/#{NotificationBean.selectedNotification.type}-icon.png" style="width:30px;height:30px" />
                                    <h:outputText value="#{NotificationBean.selectedNotification.eventID.name}, "/>
                                    <h:outputText value="#{NotificationBean.selectedNotification.type}"/>
                                </p:outputPanel>                             
                            </p:dialog>
                </p:dialog>                                                                 
            </h:form>
        </p:layoutUnit>
        
        <!-- WESTERN LAYOUT UNIT -->
        <p:layoutUnit position="west" size="270">
                                                     
            <h:form>
            <p:commandButton id="profile" value="My profile" onclick="PF('profileDialog').show();"
                         style="width:160px;height:40px;font-family:calibri;color:#000066;font-size:20px;position:absolute;top:430px;left:40px;"/>
            <p:dialog id="profileDlg" header="My profile info" widgetVar="profileDialog" resizable="false" appendTo="@(body)" style="width:400px;height:400px;background-color: aliceblue">
                <div align="center">
                <p:graphicImage value="/images/mira.jpg" style="width:200px;height:200px"/>
                </div>
                
                <p:panel>
                <div>
                    <h:outputText value="Username: " style="font-family:calibri;font-weight:bold;color:#000066;font-size:20px;"/>
                    <h:outputText value="#{userBean.username}" style="font-family:calibri;color:#000066;font-size:20px;"/>
                </div>
                <div>
                    <h:outputText value="Email: " style="font-family:calibri;font-weight:bold;color:#000066;font-size:20px;"/>
                    <h:outputText value="#{userBean.email}" style="font-family:calibri;color:#000066;font-size:20px;"/>
                </div>
                </p:panel>
                
            </p:dialog>
            </h:form>
            
            <h:form>
                <p:commandButton id="logout" value="Logout" action="#{loginBean.logout()}" 
                         style="width:160px;height:40px;font-family:calibri;color:#000066;font-size:20px;position:absolute;top:500px;left:40px;"/>         
            </h:form>            

            <h:form>
            <p:calendar value="#{ScheduleView.date}" mode="inline" readonly="true"
                        style="width:100px;height:40px;font-family:calibri;color:#000066;font-size:14px;position:absolute;top:20px;left:8px;"/>                
            </h:form>
                 
        </p:layoutUnit>
            
        
    <!-- CENTRAL LAYOUT UNIT -->
    <p:layoutUnit position="center" header="#{SearchUserBean.selectedUser.username}'s Calendar" >          
    <h:body>  
    <h:form> 
    <p:growl id="messages" showDetail="true" /> 
   
    <h:panelGrid columnClasses="value">
        <div align="center">
        <h3 style="margin-top: 0;position:absolute;top:600px"/>
        <p:schedule id="schedule" value="#{OtherCalendarBean.eventModel}" widgetVar="myschedule" 
                    view="agendaWeek" timeZone="GMT+1" aspectRatio="2" rightHeaderTemplate="null"
                    slotMinutes="15" firstHour="8" axisFormat="H:00" allDaySlot="false" 
                    draggable="false" resizable="false" timeFormat="HH:mm{ - HH:mm}" 
                    style="background-color: aliceblue; font-family:calibri; color: #000066;
                    width: 1050px; height: 560px;">
                            
            <p:ajax event="eventSelect" listener="#{OtherCalendarBean.onEventSelect}" update="eventDetails,tableInvites" />                  
 
        </p:schedule></div>
    </h:panelGrid>

    <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip"
              width="630" height="480" resizable="false" style="background-color: aliceblue">
        <p:ajax event="close" update="eventDetails,tableInvites" resetValues="true" /> <!-- initializeDialog() tolto -->
        <h:panelGrid id="eventDetails" columns="2">
            <h:outputLabel for="title" value="Name: *" />
            <h:inputText id="title" value="#{OtherCalendarBean.event.name}" readonly="true"/>             
        
            <h:outputLabel for="startHour" value="Start: *" />
            <p:calendar id="startHour" value="#{OtherCalendarBean.event.startHour}" 
                       pattern="dd/MM/yyyy HH:mm" timeZone="GMT+1" disabled="true"/> 
            
            <h:outputLabel for="endHour" value="End: *" />
            <p:calendar id="endHour" value="#{OtherCalendarBean.event.endHour}" 
                       pattern="dd/MM/yyyy HH:mm" timeZone="GMT+1" disabled="true"/> 
            
            <h:outputLabel for="city" value="City: *" />
            <p:inputText id="city" value="#{OtherCalendarBean.event.city}" readonly="true"/>
            
            <h:outputLabel for="address" value="Address: *" />
            <p:inputText id="address" value="#{OtherCalendarBean.event.address}" 
                         readonly="true"/>            
            
            <h:outputLabel for="type" value="Type: *" />
            <p:selectOneMenu id="type" required="true" value="#{OtherCalendarBean.event.type}"
                             style="width:160px;height:30px;" disabled="true"> 
                    <f:selectItem itemLabel="outdoor" itemValue="outdoor" />
                    <f:selectItem itemLabel="indoor" itemValue="indoor" />
            </p:selectOneMenu>
            
            <h:outputLabel for="visibility" value="Visibility: *" />
            <p:selectOneMenu id="visibility" required="true" value="#{OtherCalendarBean.event.visibility}"
                             style="width:160px;height:30px;" disabled="true">
                    <f:selectItem itemLabel="public" itemValue="public" />
                    <f:selectItem itemLabel="private" itemValue="private" />
            </p:selectOneMenu>
            
            <h:outputLabel for="description" value="Description:" />
            <p:inputTextarea id="description" autoResize="false" style="width:280px" value="#{OtherCalendarBean.event.description}"
                             readonly="true"/>

            <h:outputLabel for="organizer" value="Organizer:" />
            <p:inputText id="organizer" value="#{OtherCalendarBean.event.organizerID.username} - #{OtherCalendarBean.event.organizerID.email}" 
                         readonly="true"/>

            <h:outputLabel for="searchUser" value="Invites:" /> 
            <p:autoComplete id="searchUser" value="#{InviteUserBean.selectedUsers}"
                            completeMethod="#{InviteUserBean.completeUsers}" 
                            var="user" 
                            itemLabel="#{user.username}" itemValue="#{user}"
                            converter="userConverter"
                            onchange="#{InviteUserBean.selectedUsers}"
                            multiple="true"
                            disabled="true"
                            emptyMessage="No users to suggest.">  
                            
                            <p:ajax event="itemSelect" update="tableInvites"/>
                            <p:ajax event="itemUnselect" update="tableInvites"/>
                                                                  
                <p:column style="width:5%;text-align:center">
                    <p:graphicImage value="/images/user.png" style="width:35px;height:35px" />
                </p:column>
                <p:column style="width:95%;height:20px;text-align:center">
                        #{user.username} - #{user.email} 
                </p:column>
            </p:autoComplete>
            <p:watermark for="searchUser" value="Search user" />

            <div align="right">
                <p:commandButton id="showInvites" value="Show invites" disabled="#{InviteUserBean.selectedUsers.size() eq 0}"
                                 update="searchUser" oncomplete="PF('invitesDialog').show();"/> 
            </div>                    
        </h:panelGrid>      
    </p:dialog> 
    <!--</h:form>-->
        
    <!--<h:form>-->
    <p:dialog widgetVar="invitesDialog" header="List of invited users" showEffect="clip" hideEffect="clip"
              width="450" height="200" style="background-color: aliceblue" resizable="false">
        <p:dataTable id="tableInvites" var="u" value="#{InviteUserBean.selectedUsers}">              
            <p:column style="width:60%;text-align:center">
                <f:facet name="header">
                    <h:outputText value="User" />
                </f:facet>
                <h:outputText value="#{u.username} - #{u.email}" />
            </p:column>
            <p:column style="width:40%;text-align:center">
                <f:facet name="header">
                    <h:outputText value="will participate" />
                </f:facet>
                <h:outputText value="#{u.username}" />
            </p:column>
        </p:dataTable>   
    </p:dialog> 
    </h:form>
     
    <p:dialog widgetVar="privateEventDialog" header="Private event" resizable="false"  
                  showEffect="clip" hideEffect="clip" appendTo="@(body)" 
                  style="background-color:aliceblue;te" width="300" height="80" >
           <h:outputLabel value="This event is "
                          style="color:#000066;font-family:calibri;"/>
           <h:outputLabel value="private."
                           style="color:#000066;font-family:calibri;font-weight:bold"/><br/>
            <h:outputLabel value="Its details cannot be shown."
                           style="color:#000066;font-family:calibri;"/><p:spacer width="20" height="10"/>
            <p:graphicImage value="/images/lock.png" style="width:35px;height:35px"/>                       
    </p:dialog>
                                     
    <!--<h:form>          
        <p:confirmDialog widgetVar="confirmDelete" message="Are you sure about deleting this event?"
                         header="Delete event confirmation" severity="alert" appendTo="@(body)"
                         style="background-color: aliceblue">
            <p:commandButton style="margin-left: 30px; width: 90px; height: 40px" value="Yes" 
                             oncomplete="PF('myschedule').update();PF('eventDialog').hide();PF('confirmDelete').hide()"/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <p:commandButton style="margin-right: 30px; width: 90px; height: 40px" value="No" onclick="PF('confirmDelete').hide();" type="button" />
        </p:confirmDialog>
    </h:form> 
        
    <h:form>    
    <p:confirmDialog widgetVar="confirmSave" message="Event saved successfully!"
                     header="Save event confirmation" style="background-color: aliceblue">
        <div align="center">
        <p:commandButton value="OK" onclick="PF('eventDialog').hide();PF('confirmSave').hide()"/>
        </div>
    </p:confirmDialog>
    </h:form> -->
        
    </h:body>
    </p:layoutUnit>
    </p:layout>
    </h:body>
</html>



